<template>
  <div class="checkbox-wrapper">
    <mu-checkbox v-model="model"></mu-checkbox>
    <span>
      我已阅读并同意遵守
      <span class="high-light" @click="handleClick">{{ clause }}</span>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    clause: String,
  },
  data() {
    return {
      model: "",
    };
  },
  methods: {
    handleClick() {
      this.$router.push({ path: `/clause/${this.clause}` });
    },
  },
};
</script>

<style scoped>
.checkbox-wrapper {
  display: flex;
  align-items: center;
}
.high-light {
  color: brown;
}
</style>
